<template>
  <div class="home">
    <heads>
      <template v-slot:left>
        <span> </span>
      </template>
      <template v-slot:word>
        <span>图书商城</span>
      </template>
      <template v-slot:add>
        <span @click="gotobook">加入书架</span>
      </template>
    </heads>

    <ul class="con">
      <item
        v-for="(i, index) in $store.state.list"
        :key="i.id"
        :item="i"
        @click.native="edit(i, index)"
      />
    </ul>

    <van-popup v-model="show">
      <textarea name="" id="" cols="20" rows="5" v-model="editValue"></textarea>
      <button @click="update">确定</button>
    </van-popup>
  </div>
</template>

<script>
// @ is an alias to /src
import heads from "@/components/Heads.vue";
import item from "@/components/Item.vue";

export default {
  data() {
    return {
      // list: [],

      show: false,
      editValue: "",
      editIndex: -1,
    };
  },
  components: {
    heads,
    item,
  },
  mounted() {
    this.$axios.get("data.json").then((res) => {
      console.log(res);

      this.$store.commit("setlist", res.data);
    });
  },
  methods: {
    gotobook() {
      this.$router.push("/book");
    },
    edit(i, index) {
      this.show = true;
      this.editValue = i.desc;
      this.editIndex = index;
    },
    update() {
      // this.list[this.editIndex].desc = this.editValue;
      this.$store.commit("update", {
        index: this.editIndex,
        value: this.editValue,
      });

      this.show = false;
    },
  },
};
</script>
<style lang="scss">
.con {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 50%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin-top: 20px;
    img {
      width: 80%;
      height: 200px;
    }
  }
}
</style>
